<template>
  <div class="index">
    <header>
      <h3>飞鸟旅游</h3>
      <div class="header_middle">
        <router-link to="/search">
          <div class="search_icon"></div>
          <input type="text" placeholder="搜索">
        </router-link>
      </div>
      <div class="header_right">
        <router-link to="/login" v-if="!isLogin"><span>登录</span></router-link>
        <img :src="user_picUrll" alt="" v-else>
      </div>
    </header>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,i) in banner_list" :key="i">
          <img :src="item.banner_picUrl" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <footer>
      <van-tabs v-model:active="active">
        <van-tab v-for="(item,j) in navi_list" :title="item.nav_name" :key="j">
          <ul>
            <li v-for="(i,k) in artList" :key="k">
              <router-link :to="{ 
                path:'/detail', 
                query:{ article_title:i.article_title,article_content:i.article_content,article_author:i.article_author,article_create_time:i.article_create_time,article_id:i.article_id,article_type:i.article_type }
              }">
                <p v-if="i.nav_name == item.nav_name">{{ i.article_title }}</p>
              </router-link>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </footer>
  </div>

</template>

<script setup lang="ts">
import { ref,reactive } from 'vue'
import { getBanner,getNavis,getArtList,userLoginFn } from '../api/index'
import { useRouter } from 'vue-router'
const $router = useRouter();
let banner_list = ref([]);
let navi_list = ref([]);
let artList = ref([]);
let user_picUrll = ref('');
let isLogin = ref(false);
  // 定义函数获取轮播图列表
const bannerListFn = async ()=> {
    // let token = localStorage.getItem("TOKEN")
    await getBanner().then(
        (content:any)=>{
            // console.log(content)
            let {result, code} = content;
            // console.log(result,code)
            if(code == 200) {
              banner_list.value = result;
              // console.log(banner_list.value);
            }
        }
    )
}
bannerListFn();

const naviListFn = async ()=> {
    // let token = localStorage.getItem("TOKEN")
    await getNavis().then(
        (content:any)=>{
            // console.log(content)
            let {result, code} = content;
            // console.log(result,code)
            if(code == 200) {
              navi_list.value = result;
              // console.log(navi_list.value);
            }
        }
    )
}
naviListFn();

const artListFn = async ()=> {
    // let token = localStorage.getItem("TOKEN")
    await getArtList().then(
        (content:any)=>{
            // console.log(content)
            let {result, code} = content;
            // console.log(result,code)
            if(code == 200) {
              artList.value = result;
              console.log(artList.value);
            }
        }
    )
}

artListFn();


const userLogin = async ()=> {
    // let token = localStorage.getItem("TOKEN")
    await userLoginFn().then(
        (content:any)=>{
            console.log(content)
            let {user_picUrl, code} = content;
            // console.log(user_picUrl)
            if(code == 200) {
              isLogin.value = true;
              user_picUrll.value = user_picUrl;  
              // console.log(user_picUrll);
            }
            else{
              isLogin.value = false
            }
        }
    )
}

userLogin();


</script>

<style lang="less" scoped>
  .index{
    
    header{
      margin: 0 10px;
      margin-top: 5px;
      margin-bottom: 10px;
      display: flex;
      h3{
        font-size: 20px;
      }
      .header_middle{
        background-color: #f7f8fa;
        height: 30px;
        width: 220px;
        margin: 0 5px;
        border-radius: 15px;
        a{
          background-color: #f7f8fa;
          height: 30px;
          width: 220px;
          margin: 0 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 15px;
          .search_icon{
            width: 20px;
            height: 20px;
            background-image: url(../assets/img/search_icon.png);
            background-size: cover;
            margin-right: 10px;
          }
          input{
            height: 28px;
            padding: 0;
            background-color: #f7f8fa;
            font-size: 15px;
          }
          }
      }
      .header_right{
        margin-left: 10px;
        span{
          font-size: 16px;
        }
        img{
          margin-left: 5px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
    }

    .banner{
      img {
        width: 100%;
        height: 150px;
        vertical-align: middle;
      }
    }

    footer{
      ul{
        
        margin: 10px;
        li{
          p{
            font-size: 16px;
            border-bottom: 1px solid #f0f0f0;
            padding: 10px 0;
          }
        }
      }
    }
  }
</style>
